import React from 'react';
import { Row, Col, Icon, List, Card } from 'antd';
import './Three.less';
import { client } from 'assets/client.js';
import Background from 'images/home/background-3.jpg';
import { Font } from 'components/page';

import threeOne from 'images/home/three-one.png';
import threeTwo from 'images/home/three-two.png';
import threeThree from 'images/home/three-three.png';
import threeFour from 'images/home/three-four.png';

const sectionStyle = {
    width: "100%",
    display: 'block',
    backgroundImage: "url(" + Background + ")",
    backgroundSize: '100% 100%, cover', 
    backgroundRepeat: 'no-repeat',
    height: '500px',
};

const text = [
    {
        img: threeOne,
        title: "Powerful Manufactory",
        content: "For many years focused on aluminum production"
    },{
        img: threeTwo,
        title: "The Supply Of Powerful Productivity",
        content: "Meet your delivery time reqirements",
    },{
        img: threeThree,
        title: "Advanced Equipment",
        content: "Innovative technology with heart",
    },{
        img: threeFour,
        title: "Excellent After-Sales Serivce",
        content: "7x24 hours to solve your problems",
    }
]

class Three extends React.Component{
    state = {
        font: client.font("COMPANY ADVANTAGE", "DEVELOPMENT HISTORY"),
    }

    render(){
        return (
            <div  style={sectionStyle} className="three">
               <Font titleStr={this.state.font} />
               <div className="three-content">
                    <Row type="flex" justify="center" className="three-content-row">
                        {text.map((item) => {
                           return <Col span={4} className="three-content-row-col">
                                <div className="three-content-row-col-item">
                                    <div className="three-content-row-col-item-content">
                                        <div className="three-content-row-col-item-content-bordered">
                                            <div className="three-card-head">
                                                <div className="three-card-head-wrapper">
                                                    <div className="three-card-head-wrapper-title"><img src={item.img} /></div>
                                                </div>
                                            </div>

                                            <div className="three-card-body">
                                                <div className="three-card-body-wrapper">
                                                        <div className="three-card-body-wrapper-title">                                               
                                                            <h2>{item.title}</h2>
                                                            <div className="three-card-body-wrapper-title-description">{item.content}</div>                                       
                                                        </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Col>
                        })}
                        
                    </Row>
                   
               </div>
            </div>
        )
    }
}

    
export default Three;